<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号注册-党支部论坛</title>
    <style>
        body{
            background-image:url("../../images/login/register.jpg");
            background-size:cover;
        }
        #eyes {
            width: 18px;
            position: absolute;
            top: 196px;
            left: 710px;
        }
        #wrapper{
            width: 1250px;
            height: 600px;
            margin: 0 auto;
        }
        #header{
            width: 100%;
            height: 30px;
        }
        #main{
            background-color: rgba(96,96,96,0.1);
            margin-left: 350px;
            margin-top: 20px;
            padding-top: 20px;
            width: 500px;
            height: 480px;
            border-radius: 10px;
            text-align: center;
        }
        #test{
            background-color: mediumseagreen;
            border-radius: 5px;
            border: none;
            width: 310px;
            height: 35px;
            color: aliceblue;
        }
    </style>
    <script src="../../js/login/register.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        <h3>欢迎注册</h3>
        <hr color="black" size="0.5"/><br>
        <form action="success.do" method="post" onsubmit="return usercheck()">
            &nbsp;用&nbsp;户&nbsp;名：<input type="text" name="username" id="username" onblur="decide()" onclick="checkall()">
            <span id="conuser">*</span><br>
            密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"id="password" onblur="conpas()"onclick="checkall1()">
            <label><img src="../../images/login/1.png" alt="" id="eyes"></label>
            <span id="conpas">*</span><br>
            确认密码：<input type="password" name="password1" id="password1" onblur="confirm()" onclick="checkall2()">
            <span id="confirm">*</span><br>
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text" name="realname" id="realname" onblur="f1()" onclick="checkall3()">
            <span id="conreal">*</span><br>
            学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" name="stunumber" id="stunumber" onblur="f2()" onclick="checkall4()">
            <span id="connumber">*</span><br>
            年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" name="age" id="age" onblur="f3()" onclick="checkall5()">
            <span id="conage">*</span><br>
            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
            <input type="radio" name="sex" value="man" >男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" value="woman" >女<br>
            手 机 号：<input type="text" name="phone" id="phone" onblur="f4()"onclick="checkall6()">
            <span id="conphone">*</span><br>
            邮 &nbsp;&nbsp;&nbsp; 箱：<input type="text" name="email" th:value="${mailname}" readonly="readonly"><br>
            年 &nbsp;&nbsp;&nbsp; 级：<input type="text" name="grade" id="grade"onblur="f5()" onclick="checkall7()">
            <span id="congrede">*</span><br>
            学 院：<select name="cid" id="cid" onchange="selectMajor();">
                        <option value="">----请选择学院名称----</option>
                        <option th:each=" college:${collegeList}" th:value="${college.cid}" th:text="${college.getCid()}+${college.getCname()}"></option>
                  </select><br>
            专 业：<select name="mid" id="mid">
                        <option value="">----请选择专业名称----</option>
                  </select><br>
            <p>*号为必填项</p>
            <input type="submit" id="test" onclick="nonull()" value="立即注册">
        </form>
    </div>
</div>
<script>
    function checkall() {
        if ($("#conuser").text()!="用户名已存在"){
            $("#conuser").text("*");
        }
    }
    function checkall1() {
        $("#conpas").text("*");
    }
    function checkall2() {
        $("#confirm").text("*");
    }
    function checkall3() {
        $("#conreal").text("*");
    }
    function checkall4() {
        $("#connumber").text("*");
    }
    function checkall5() {
        $("#conage").text("*");
    }
    function checkall6() {
        $("#conphone").text("*");
    }
    function checkall7() {
        $("#congrede").text("*");
    }
    function usercheck(){
        var regu2 = /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/;//密码要包含字母，数字，不能有特殊符号
        var grade = $("#grade").val();
        var phone = $("#phone").val();
        var age = $("#age").val();
        var stunumber = $("#stunumber").val();
        var realname = $("#realname").val();
        var username = $("#username").val();
        var password = $("#password").val().replace(/\s+/g,"");//去掉空格
        var password1 = $("#password1").val().replace(/\s+/g,"");//去掉空格;
        if(grade==""||phone==""||age==""||stunumber==""||realname==""||username==""||password==""||password1==""){
            return false;
        }else if(password!=password1){
            $("#confirm").text("密码不一致");
            return false;
        }else if($("#conuser").text()=="用户名已存在"){
            return false;
        }else if(password.length<6||!regu2.test(password)){
            $("#conpas").text("密码应该大于六位且要包含字母和数字并且不能包含特殊字符");
            return false;
        }
        else return true;
    }
    $('#test').attr("disabled",true);
    var input = document.getElementById("password");
    var imgs = document.getElementById('eyes');
    //下面是一个判断每次点击的效果
    var flag = 0;
    imgs.onclick = function () {
        if (flag == 0) {
            input.type = 'text';
            eyes.src = 'images/login/2.png';//睁眼图
            flag = 1;
        } else {
            input.type = 'password';
            eyes.src = 'images/login/1.png';//闭眼图
            flag = 0;
        }
    }
</script>
</body>
</html>